<template>
	<view style="background-color: #f5f5f5;">
		<search v-if="searchIf" ref="sea" @confirm="confirmSearch" />
		<view class="all">
			<view class="sheng">
				<view class="title">
					<scroll-view scroll-x @scroll="scroll" style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft" >
						<view v-for="(item,index) in parent" style="display:inline-block" :key="index">
							<view style='display:inline-block' v-if="index==0" @click="backTree(item,-1)" :class="index==parent.length-1&&!isre?'none':'active'">全部</view>
							<view style='display:inline-block' v-if="index==0&&isre" @click="backTree(item,-2)" :class="index==parent.length-1&&isre?'none':'active'">
								<text style='display:inline-block;margin: 0 6px;color: #D0D4DB;font-size: 14px;' class="iconfont icon-z043"></text>
								搜索结果
							</view>
							<view style='display:inline-block' @click="backTree(item,index)" v-if="index!=0">
								<text style='display:inline-block;margin: 0 6px;color: #D0D4DB;font-size: 14px;' v-if="index!=0" class="iconfont icon-z043"></text>
								<text style='display:inline-block' :class="index==parent.length-1?'none':'active'">
									{{item[props.label]}}
								</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<scroll-view scroll-y="true" class="common-scroll-Y" >
					<view class="common" v-for="(item, index) in tree" @click="toChildren(item, index)" :key="index">
						<label class="content">
							<view class="checkbox" v-if="isCheck" @click.stop="checkboxChange(item,index)">
								<text style="color: #0095F2;font-size: 18px;" v-if="item.checked||getParentChecked(item)" class="iconfont icon-xuanzhong txt colors"></text>
								<text style="font-size: 18px;color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt"></text>
							</view>
							<view class="person" v-if="item.user" >
								{{item[props.label].substring(item[props.label].length-2)}}
							</view>
							<view class="word">
								{{item[props.label]}}
								<view class="dept-name">
									{{item.dept_name}}
								</view>
							</view>
							<view class="right">
								<text  v-if="!item.user&&item.children.length>0" class="iconfont icon-z043"></text>
							</view>
						</label>
					</view>
				</scroll-view>
				<view class="user-list">
					<view class="view-col">已选<text>{{sel_user.length}}</text>人</view>
					<view class="view-col right-text" @click="showCY">常用联系人</view>
				</view>
			</view>
		</view>
		<uni-popup ref="drawer" type="top">
			<view class="cy-user-list">
				<view class="cy-title">
					常用联系人
				</view>
				<scroll-view scroll-y="true" class="cy-scroll-Y" >
					<view class="common" v-for="(item, index) in ycList" :key="index" @click.stop="checkboxCY(item)">
						<label class="content">
							<view class="checkbox">
								<text style="color: #0095F2;font-size: 18px;" v-if="item.checked" class="iconfont icon-xuanzhong txt colors"></text>
								<text style="font-size: 18px;color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt"></text>
							</view>
							<view class="person" v-if="item.user" >
								{{item[props.label].substring(item[props.label].length-2)}}
							</view>
							<view class="word">
								{{item[props.label]}}
								<view class="dept-name">
									{{item.dept_name}}
								</view>
							</view>
							<view class="right">
								<text v-if="!item.user&&item.children.length>0" class="iconfont icon-z043"></text>
							</view>
						</label>
					</view>
				</scroll-view>
				<view class="user-list cy-bottom">
					<view class="view-col">已选<text>{{sel_user.length}}</text>人</view>
					<view class="view-col right-text" @click="hideCY">组织架构</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import search from './components/search/index.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		props: {
			trees: {
				type: Array,
				default: () => []
			},
			ycList: {
				type: Array,
				default: () => []
			},
			seledUser: {
				type: Array,
				default: () => []
			},
			isCheck: {
				type: Boolean,
				default: () => false
			},
			checkList: {
				type: Array,
				default: () => []
			},
			searchIf:{
				type:Boolean,
				default:()=>true
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'name',
						children: 'children'
					}
				}
			}
		},
		data() {
			return {
				isre: false,
				tree: this.trees,
				allData: this.trees,
				parent: [1],
				searchResult: [],
				party_current: 100000,
				scrollLeft:999,
				old: {
					scrollTop: 0
				},
				sel_user: this.seledUser
			}
		},
		components: {
			search, uniPopup
		},
		mounted() {
			// if (this.ycList.length > 0) {
				this.$refs.drawer.open()
			// }
		},
		methods: {
			checkboxChange: function(item, index) {
				var that = this;
				let status = !that.tree[index].checked
				let user_count = 0
				let getUserCount = (pdata) => {
					let _user_count = 0
					for (let i = 0; i < pdata.length; i++) {
						if (pdata[i].user && !pdata[i].checked) {
							_user_count += 1
						}
						if (pdata[i].children.length > 0) {
							_user_count += getUserCount(pdata[i].children)
						}
					}
					return _user_count
				}
				let funSetChecked = (pdata) => {
					for (let i = 0; i < pdata.length; i++) {
						if (pdata[i].user && pdata[i].checked !== status) {
							pdata[i].checked = status
							if (status) {
								that.sel_user.push(pdata[i])
							} else {
								that.sel_user.splice(that.sel_user.findIndex((v) => {
									return v.id === pdata[i].id
								}), 1)
							}
							funSetCY(pdata[i].id)
						}
						if (pdata[i].children.length > 0) {
							funSetChecked(pdata[i].children)
						}
					}
				}
				let funSetCY = (pid) => {
					let _index = this.ycList.findIndex(v => {
						return v.id === pid
					})
					if (_index !== -1) {
						this.ycList[_index].checked = status
					}
				}
				
				if (status) {
					if (that.tree[index].user) {
						user_count = 1
					} else {
						if (that.tree[index].children.length > 0) {
							user_count = getUserCount(that.tree[index].children)
						}
					}
					if (that.sel_user.length + user_count > 50) {
						this.$u.toast('最多选择50位协作人')
						return
					}
				}
				
				that.$set(that.tree[index], 'checked', status)
				
				if (that.tree[index].user) {
					if (status) {
						console.log('加1', that.tree[index])
						that.sel_user.push(that.tree[index])
					} else {
						console.log('减', that.tree[index])
						that.sel_user.splice(that.sel_user.findIndex((v) => {
							return v.id === that.tree[index].id
						}), 1)
					}
					funSetCY(that.tree[index].id)
				}
				
				if (that.tree[index].children.length > 0) {
					funSetChecked(that.tree[index].children)
				}
				
				// if (that.parent[1]) {
				// 	let _count = 0
				// 	that.parent[1].children.forEach((v) => {
				// 		if (v.checked) {
				// 			_count += 1
				// 		}
				// 	})
				// 	that.parent[1].checked = that.parent[1].children.length === _count
				// }
				that.$emit('sendValue', that.tree, that.sel_user)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			toChildren(item, index) {
				var that = this;
				let children = that.props.children
				if (!item.user && item[children].length > 0) {
					that.tree = item[children]
					for (var i = 0, len = that.tree.length; i < len; i++) {
						for (var j = 0, lens = that.checkList.length; j < lens; j++) {
							if (that.checkList[j].id === that.tree[i].id) {
								that.$set(that.tree[i], 'checked', true)
								break
							} else {
								that.$set(that.tree[i], 'checked', false)
							}
						}
					}
					if (that.parent[0].id == item.id) {

					} else {
						that.parent.push(item)
					}	
				} else if(item.user) {
					this.checkboxChange(item, index)
				}
			},
			confirmSearch(val) {
				if (val === '') {
					this.backTree(null, -1)
					return
				}
				this.searchResult = []
				this.search(this.allData, val)
				this.isre = true
				this.parent.splice(1, 6666)
				uni.showLoading({
					title: '正在查找'
				})
				setTimeout(() => {
					this.tree = this.searchResult
					uni.hideLoading()
				}, 2000)
			},
			search(data, keyword) {
				var that = this
				let children = that.props.children
				for (var i = 0, len = data.length; i < len; i++) {
					if (data[i].name.indexOf(keyword) >= 0) {
						that.searchResult.push(data[i])
					}
					if (!data[i].user && data[i][children].length > 0) {
						that.search(data[i][children], keyword)
					}
				}
			},
			backTree(item, index) {
				if (index == -1) {
					this.tree = this.allData
					this.parent.splice(1, 6666)
					this.isre = false
					this.$refs.sea.clears()
				} else if (index == -2) {
					this.tree = this.searchResult
					this.parent.splice(1, 6666)
				} else {
					var t = this
					if (this.parent.length - index > 2) {
						this.parent.forEach((item, i) => {
							if (i > index) {
								this.parent.splice(i, 6666)
							}
						})
					} else if (index == this.parent.length - 1) {
						console.log('不操作')
					} else {
						this.parent.splice(this.parent.length - 1, 1)
					}
					this.tree = item[this.props.children]
				}
			},
			showCY() {
				this.$refs.drawer.open()
			},
			hideCY() {
				this.$refs.drawer.close()
			},
			checkboxCY(item) {
				let status = !item.checked
				let funSetCYChecked = (pdata) => {
					for (let i = 0; i < pdata.length; i++) {
						if (pdata[i].user) {
							if (item.id === pdata[i].id) {
								pdata[i].checked = status
								if (status) {
									this.sel_user.push(pdata[i])
								} else {
									this.sel_user.splice(this.sel_user.findIndex((v) => {
										return v.id === pdata[i].id
									}), 1)
								}
								break;
							} else {
								continue
							}
						} else {
							if (pdata[i].children.length > 0) {
								funSetCYChecked(pdata[i].children)
							}
						}
					}
				}
				if (status && this.sel_user.length + 1 > 50) {
					this.$u.toast('最多选择50位协作人')
					return
				}
				item.checked = status
				funSetCYChecked(this.allData)
				this.$emit('sendValue', this.tree, this.sel_user)
			},
			getParentChecked(item) {
				if (item.children.length === 0) {
					return false
				}
				let _tmp = 0
				for(let i = 0; i < item.children.length; i++) {
					if (item.children[i].checked) {
						_tmp += 1
					}
				}
				item.checked = _tmp === item.children.length
				return item.checked
			}
		}
	}
</script>
<style lang="scss" scoped>
	.flex_between_center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.checkbox {
		position: relative;
		height: 18px;
		margin-left: 5px;
		margin-right: 0px;
		width: 18px;
		.color{
			color: #00aaff;
			background-color: #00aaff;
		}
		.txt {
			line-height: 18px;
			width: 100%;
			height: 100%;
			display: flex;
		}
	}
	.checkBorder {
		border: 1px solid #ecdee4;
	}
	.all {
		// padding-bottom: 68px;
		background-color: #f5f5f5;

		.sheng {
			margin-bottom: 10px;

			.title {
				height: 45px;
				padding: 0 16px;
				line-height: 45px;
				font-size: 15px;
				color: #606064;
			}
		}
	}
	// .common-list {
	// 	height: ;
	// }
	.common-scroll-Y {
		height: calc(100vh - 155px);
	}
	.common {
		background-color: #fff;

		.content {
			display: flex;
			align-items: center;
			padding-left: 5px;
			border-bottom: 1px solid #fafafa;
			height: 50px;
			width: 100%;
			line-height: 50px;
			position: relative;
			font-size: 16px;
			.right{
				position: absolute;
				right: 15px;
				color: #babdc3;
				font-size: 16px;
			}
			.word {
				margin-left: 6px;
				line-height: 20px;
				.dept-name {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
	.person {
		height: 32px;
		width: 32px;
		border-radius: 50%;
		border: 1px solid #ff9f44;
		background-color: #fff9f4;
		margin-left: 0px;
		color: #f57a00;
		line-height: 32px;
		font-size: 11px;
		text-align: center;
		margin-left: 10px;
	}

	.active {
		color: #4297ED;
	}

	.none {
		color: #666666;
	}
	
	.user-list {
		display: flex;
		text {
			padding-left: 10px;
			color: #0091EA;
		}
		.view-col {
			flex: 1;
			padding: 0 12px;
			height: 50px;
			line-height: 50px;
		}
		.right-text {
			text-align: right;
			text-decoration: underline;
			color: #0091EA;
		}
	}
	.cy-user-list {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		.cy-scroll-Y {
			height: calc(100vh - 90px);
		}
		.cy-title {
			padding: 0 12px;
			height: 40px;
			line-height: 40px;
		}
	}
	 @import url("./css/icon.css");
	//@import url("https://at.alicdn.com/t/font_2009600_07r9regf6vmw.css");
</style>
